<template>
  <div class="grid-setting" id="grid-setting">
    <el-form ref="gridSetting" :model="setting" :rules="rules" label-position="top" style="height:auto;">
      <el-form-item :label="$t('custom.component.gadget.associated')">
        <div v-for="(its,indexs) in setting.associatedFields" :key="indexs" style="margin-bottom:10px">
          <el-select v-model="its.value" :placeholder="$t('custom.component.gadget.placeholder')" @change="associatedChange(indexs)" filterable clearable>
            <el-option v-for="(item,index) in fieldsList" :key="index"  :label="item.name" :value="item.name"></el-option>
          </el-select>
          <el-tooltip :open-delay="1000" class="item" effect="dark" :content="$t('custom.component.gadget.addField')" placement="top">
              <el-button style="font-size: 16px;margin-left: 20px" :disabled="setting.associatedFields.length===2"
                    type="text" size="mini" icon="el-icon-circle-plus-outline"
                    @click="addRow()"
              ></el-button>
          </el-tooltip>
          <el-tooltip :open-delay="1000" class="item" effect="dark" :content="$t('custom.component.gadget.delete')" placement="top">
            <el-button style="margin-left: 20px;font-size: 16px;" :disabled="setting.associatedFields.length===1"
                type="text" size="mini" icon="el-icon-delete"
                @click="deleteSelectedRow(indexs)"
              ></el-button>
          </el-tooltip>
        </div>
      </el-form-item>
      <el-form-item :label="$t('custom.component.gadget.text')">
        <el-input v-model="setting.text" @input="inputHandler" style="width:217px" clearable></el-input>
      </el-form-item>
      <el-form-item :label="$t('custom.component.gadget.value')">
        <el-input v-model="setting.value" @input="inputHandler" style="width:217px" clearable></el-input>
      </el-form-item>
      <el-form-item :label="$t('custom.component.gadget.queryParams')" prop="queryParams">
        <el-input v-model="setting.queryParams[0]" @input="inputHandler" style="width:217px" clearable></el-input>
      </el-form-item>
      <el-form-item :label="$t('custom.component.gadget.waterMark')">
        <el-input v-model="setting.watermark" @input="inputHandler" style="width:217px" clearable></el-input>
      </el-form-item>
      <el-form-item :label="$t('custom.component.gadget.filterlabel')">
        <el-input v-model="setting.filterlabel" @input="inputHandler" style="width:217px" clearable></el-input>
      </el-form-item>
    </el-form>

  </div>
</template>

<script>
export default {
  name: 'CascaderSetting',
  data () {
    let validatequeryParams = (rule, value, callback) => {
      let str = this.setting.queryParams[0].toLowerCase()
      if (str && (str === 'name' || str === 'pageid' || str === 'appid')) {
        callback(new Error('please do not set the QueryParams name to the reserved names: name, pageid, appid.'))
      } else {
        callback()
      }
    }
    return {
      setting: {
        headerTitle: '',
        headerDescription: '',
        associatedFields: [{ name: '', value: '' }],
        queryParams: [],
        text: '',
        value: '',
        watermark: 'Select a Client',
        filterlabel: '',
        height: '220px',
        multiplemode: false,
        slicer: {
          key: 'queryParams',
          dbType: 'text'
        }

      },
      rules: {
        queryParams: [
          { validator: validatequeryParams, trigger: 'change' }
        ] }

    }
  },
  props: [
    'data', 'fieldsList', 'dataInfo'
  ],
  watch: {
    data (value, oldValue) {
      return this.updateSetting(value)
    }
  },

  created () {
    if (this.data) {
      this.$set(this.data)
    }
    this.queryKeyOptions()
  },
  methods: {
    queryKeyOptions () {
      const params = {
        gadgetId: this.dataInfo.gadgetId
      }
      this.$interface.reports.getFieldsListCacheApi(params)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            // return this.$message.error(res.msg)
            return false
          }
          this.fieldsList = res.data
        }).catch(() => {
          this.fieldsList = []
        })
    },
    inputHandler () {
      this.$forceUpdate()
    },
    associatedChange (indexs) {
      this.$forceUpdate()
    },
    deleteSelectedRow (indexs) {
      if (this.setting.associatedFields.length === 1) {
        this.setting.associatedFields = [{ label: '', value: '' }]
      } else {
        this.setting.associatedFields.splice(indexs, 1)
      }
    },
    addRow () {
      this.setting.associatedFields.push({ label: '', value: '' })
    },
    getData () {
      return this.setting
    },
    updateSetting (value, list, layerStatus) {
      this._.merge(this.setting, value.gadgetSetting)

      this.$emit('update:data', this.setting)
    }
  }
}
</script>

<style lang="scss">
.grid-setting {

    .column-card {
      margin-top: 8px;
    }
    .el-card__body {
      padding: 5px 20px !important;
    }
    .column-field {
      font-weight: bold;
    }
    .column-type {
      color: #9ea1a7;
    }
    .column-link {
      float: left;
      border: none;
      margin-left:3px;
    }
    .el-form-item .el-form-item {
      margin-bottom: 4px;
    }
}

</style>
<style scoped lang="scss">
 ::v-deep .el-form-item {
      margin-bottom: 18px !important;
    }
</style>
